<template>
  <div class="layer-panel">
    <div class="layer-panel-header">
      <h4>图层管理</h4>
      <div class="layer-actions">
        <el-button size="small" icon="el-icon-folder-add" @click="createGroup">组</el-button>
        <el-button size="small" icon="el-icon-delete" @click="deleteSelected">删除</el-button>
      </div>
    </div>
    
    <div class="layer-search">
      <el-input
        size="small"
        placeholder="搜索图层"
        prefix-icon="el-icon-search"
        v-model="searchText"
        clearable
      />
    </div>
    
    <div class="layer-list">
      <template v-if="filteredLayers.length > 0">
        <LayerItem
          v-for="layer in filteredLayers"
          :key="layer.id"
          :layer="layer"
          :isSelected="selectedLayerId === layer.id"
          @select="selectLayer"
          @toggle-visibility="toggleLayerVisibility"
          @toggle-lock="toggleLayerLock"
        />
      </template>
      <div v-else class="no-layers">
        <p>暂无图层</p>
        <p>添加图形或文本创建图层</p>
      </div>
    </div>
    
    <div class="layer-panel-footer">
      <div class="layer-order-buttons">
        <el-tooltip content="上移一层" placement="top">
          <el-button 
            size="small" 
            icon="el-icon-top" 
            :disabled="!selectedLayerId" 
            @click="moveLayerUp"
          ></el-button>
        </el-tooltip>
        <el-tooltip content="下移一层" placement="top">
          <el-button 
            size="small" 
            icon="el-icon-bottom" 
            :disabled="!selectedLayerId" 
            @click="moveLayerDown"
          ></el-button>
        </el-tooltip>
        <el-tooltip content="移至顶层" placement="top">
          <el-button 
            size="small" 
            icon="el-icon-top-right" 
            :disabled="!selectedLayerId" 
            @click="moveLayerToTop"
          ></el-button>
        </el-tooltip>
        <el-tooltip content="移至底层" placement="top">
          <el-button 
            size="small" 
            icon="el-icon-bottom-right" 
            :disabled="!selectedLayerId" 
            @click="moveLayerToBottom"
          ></el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useLayerStore } from '../../store/layerStore';
import LayerItem from './LayerItem.vue';

const layerStore = useLayerStore();
const searchText = ref('');
const selectedLayerId = ref(null);

// 过滤图层
const filteredLayers = computed(() => {
  if (!searchText.value) return layerStore.layers;
  
  return layerStore.layers.filter(layer => 
    layer.name.toLowerCase().includes(searchText.value.toLowerCase())
  );
});

// 选择图层
const selectLayer = (layerId) => {
  selectedLayerId.value = layerId;
  layerStore.selectLayer(layerId);
};

// 切换图层可见性
const toggleLayerVisibility = (layerId) => {
  layerStore.toggleLayerVisibility(layerId);
};

// 切换图层锁定状态
const toggleLayerLock = (layerId) => {
  layerStore.toggleLayerLock(layerId);
};

// 创建图层组
const createGroup = () => {
  layerStore.createLayerGroup();
};

// 删除选中的图层
const deleteSelected = () => {
  if (selectedLayerId.value) {
    layerStore.deleteLayer(selectedLayerId.value);
    selectedLayerId.value = null;
  }
};

// 上移图层
const moveLayerUp = () => {
  if (selectedLayerId.value) {
    layerStore.moveLayerUp(selectedLayerId.value);
  }
};

// 下移图层
const moveLayerDown = () => {
  if (selectedLayerId.value) {
    layerStore.moveLayerDown(selectedLayerId.value);
  }
};

// 移至顶层
const moveLayerToTop = () => {
  if (selectedLayerId.value) {
    layerStore.moveLayerToTop(selectedLayerId.value);
  }
};

// 移至底层
const moveLayerToBottom = () => {
  if (selectedLayerId.value) {
    layerStore.moveLayerToBottom(selectedLayerId.value);
  }
};
</script>

<style scoped>
.layer-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.layer-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.layer-panel-header h4 {
  margin: 0;
  font-size: 14px;
  color: #606266;
}

.layer-actions {
  display: flex;
  gap: 5px;
}

.layer-search {
  margin-bottom: 10px;
}

.layer-list {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 10px;
}

.no-layers {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: #909399;
  font-size: 12px;
  text-align: center;
}

.no-layers p {
  margin: 5px 0;
}

.layer-panel-footer {
  padding-top: 5px;
  border-top: 1px solid #e4e7ed;
}

.layer-order-buttons {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
</style>